{% extends './base.html' %}
{% block title %}
<title>{{page_title}}-產品詳情</title>

<link rel="stylesheet" href="/public/assets/new/plugins/master-slider/quick-start/masterslider/style/masterslider.css">
<link rel='stylesheet' href="/public/assets/new/plugins/master-slider/quick-start/masterslider/skins/default/style.css">
{% endblock %}
{% block body %}
    
    <!--=== Shop Product ===-->
    <div class="shop-product">
        <!-- Breadcrumbs v5 -->
        <div class="container">
            <ul class="breadcrumb-v5">
                <li><a href="/"><i class="fa fa-home"></i></a></li>
                <li><a href="/shop/goods">產品列表</a></li>
                <li class="active">產品詳情</li>
            </ul> 
        </div>
        <!-- End Breadcrumbs v5 -->

        <div class="container">
            <div class="row">
                <div class="col-md-6 md-margin-bottom-50">
                    <div class="ms-showcase2-template">
                        <!-- Master Slider -->
                        <div class="master-slider ms-skin-default" id="masterslider">
                            <div class="ms-slide">
                                <img class="ms-brd" src="/public/assets/new/img/blank.gif" data-src="{{goods.imgurl}}" alt="{{goods.title}}">
                                <img class="ms-thumb" src="{{goods.imgurl}}" alt="{{goods.title}}">
                            </div>
                            {% for img in goodsImages %}
                            <div class="ms-slide">
                                <img src="/public/assets/new/img/blank.gif" data-src="{{img.imgurl}}" alt="{{goods.title}}">
                                <img class="ms-thumb" src="{{img.imgurl}}" alt="{{goods.title}}">
                            </div>
                            {% endfor %}
                        </div>
                        <!-- End Master Slider -->
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="shop-product-heading">
                        <h2>{{goods.title}}</h2>
                        <!-- <ul class="list-inline shop-product-social">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                        </ul> -->
                    </div><!--/end shop product social-->

                    <!-- <ul class="list-inline product-ratings margin-bottom-30">
                        <li><i class="rating-selected fa fa-star"></i></li>
                        <li><i class="rating-selected fa fa-star"></i></li>
                        <li><i class="rating-selected fa fa-star"></i></li>
                        <li><i class="rating fa fa-star"></i></li>
                        <li><i class="rating fa fa-star"></i></li>
                        <li class="product-review-list">
                            <span>(1) <a href="#">Review</a> | <a href="#"> Add Review</a></span>
                        </li>
                    </ul> -->

                    <p>{{goods.name}}</p><br>

                    <ul class="list-inline shop-product-prices margin-bottom-30">
                        <li class="shop-red">NTD${{goods.price}}</li>
                        <li class="line-through">NTD${{goods.priceMarket}}</li>
                        <!-- <li><small class="shop-bg-red time-day-left">4 days left</small></li> -->
                    </ul><!--/end shop product prices-->
                    <h5 class="c-red f-s-16">限時限量折扣！</h5>

                    <!-- <h3 class="shop-product-title">Size</h3>
                    <ul class="list-inline product-size margin-bottom-30">
                        <li>
                            <input type="radio" id="size-1" name="size">
                            <label for="size-1">S</label>
                        </li>
                        <li>    
                            <input type="radio" id="size-2" name="size">
                            <label for="size-2">M</label>
                        </li>    
                        <li>    
                            <input type="radio" id="size-3" name="size" checked>
                            <label for="size-3">L</label>
                        </li>    
                        <li>    
                            <input type="radio" id="size-4" name="size">
                            <label for="size-4">XL</label>
                        </li>    
                    </ul> -->
                    <!-- <h3 class="shop-product-title">Color</h3>
                    <ul class="list-inline product-color margin-bottom-30">
                        <li>
                            <input type="radio" id="color-1" name="color">
                            <label class="color-one" for="color-1"></label>
                        </li>
                        <li>    
                            <input type="radio" id="color-2" name="color" checked>
                            <label class="color-two" for="color-2"></label>
                        </li>    
                        <li>    
                            <input type="radio" id="color-3" name="color">
                            <label class="color-three" for="color-3"></label>
                        </li>  
                    </ul> -->

                    <h3 class="shop-product-title">數量</h3>
                    <div class="margin-bottom-40">
                        <form name="f1" class="product-quantity sm-margin-bottom-20">
                            <button type='button' class="quantity-button" name='subtract' onclick='javascript: minusQty("");' value='-'>-</button>
                            <input type='text' class="quantity-field" name='qty' value="1" id='qty' onblur="checkQty(this)"/>
                            <button type='button' class="quantity-button" name='add' onclick='javascript: document.getElementById("qty").value++;' value='+'>+</button>
                        </form>
                        <button type="button" class="btn-u btn-u-sea-shop btn-u-lg" onclick="addNumCart('{{goods.goodsID}}','{{goods.price}}')">加入購物車</button>
                    </div><!--/end product quantity-->    

                    <ul class="list-inline add-to-wishlist add-to-wishlist-brd">
                        <li class="wishlist-in c-p"  onclick="addWishList('{{goods.goodsID}}')">
                            <i class="fa fa-heart"></i>
                            <a >收藏商品</a>
                        </li>
                        <!-- <li class="compare-in">
                            <i class="fa fa-exchange"></i>
                            <a href="#">Add to Compare</a>
                        </li> -->
                    </ul>    
                    <!-- <p class="wishlist-category"><strong>Categories:</strong> <a href="#">Clothing,</a> <a href="#">Shoes</a></p> -->
                </div>
            </div><!--/end row-->
        </div>    
    </div>
    <!--=== End Shop Product ===-->

    <!--=== Content Medium ===-->
    <div class="content-md container">
        <!--=== Product Service ===-->
        <div class="row margin-bottom-60">
            <div class="col-md-4 product-service md-margin-bottom-30">
                <div class="product-service-heading">
                    <i class="fa fa-truck"></i>
                </div>
                <div class="product-service-in">
                    <h3>免運費</h3>
                    <p>商場內所有商品都是免運費</p>
                    <!-- <a href="#">+Read More</a> -->
                </div>
            </div>
            <div class="col-md-4 product-service md-margin-bottom-30">
                <div class="product-service-heading">
                    <i class="icon-earphones-alt"></i>
                </div>
                <div class="product-service-in">
                    <h3>客戶服務</h3>
                    <p>在這裡，您可以享受等同於線下商城的尊貴服務</p>
                    <!-- <a href="#">+Read More</a> -->
                </div>
            </div>
            <div class="col-md-4 product-service">
                <div class="product-service-heading">
                    <i class="icon-refresh"></i>
                </div>
                <div class="product-service-in">
                    <h3>售後</h3>
                    <p>所有商品收貨7天內無理由退貨</p>
                    <!-- <a href="#">+Read More</a> -->
                </div>
            </div>
        </div><!--/end row-->
        <!--=== End Product Service ===-->

        <div class="tab-v5">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#description" role="tab" data-toggle="tab">詳情描述</a></li>
                <!-- <li><a href="#reviews" role="tab" data-toggle="tab">Reviews (1)</a></li> -->
            </ul>

            <div class="tab-content">
                <!-- Description -->
                <div class="tab-pane fade in active" id="description">
                    {{ goods.note | safe }}
                </div>
                <!-- End Description -->

                <!-- Reviews -->                
                <div class="tab-pane fade" id="reviews">
                    <div class="product-comment margin-bottom-40">
                        <div class="product-comment-in">
                            <img class="product-comment-img rounded-x" src="/public/assets/new/img/team/01.jpg" alt="">
                            <div class="product-comment-dtl">
                                <h4>Mickel <small>22 days ago</small></h4>
                                <p>I like the green colour, it's very likeable and reminds me of Hollister. A little loose though but I am very skinny</p>
                                <ul class="list-inline product-ratings">
                                    <li class="reply"><a href="#">Reply</a></li>
                                    <li class="pull-right">
                                        <ul class="list-inline">
                                            <li><i class="rating-selected fa fa-star"></i></li>
                                            <li><i class="rating-selected fa fa-star"></i></li>
                                            <li><i class="rating-selected fa fa-star"></i></li>
                                            <li><i class="rating fa fa-star"></i></li>
                                            <li><i class="rating fa fa-star"></i></li>
                                        </ul>
                                    </li>    
                                </ul>
                            </div>
                        </div>    
                    </div>
                    <h3 class="heading-md margin-bottom-30">增加評論</h3>
                    <form method="post" id="sky-form3" class="sky-form sky-changes-4">
                        <fieldset>
                            <div class="margin-bottom-30">
                                <label class="label-v2">用戶名</label>
                                <label class="input w-per-100">
                                    <input type="text" name="name" id="name" class="w-per-100">
                                </label>
                            </div>    
                            
                            <div class="margin-bottom-30">
                                <label class="label-v2">郵箱</label>
                                <label class="input w-per-100">
                                    <input type="email" name="email" id="email"  class="w-per-100">
                                </label>
                            </div>    
                            
                            <div class="margin-bottom-30">
                                <label class="label-v2">Review</label>
                                <label class="textarea w-per-100">
                                    <textarea rows="7" name="message" id="message"  class="w-per-100"></textarea>
                                </label>
                            </div>    
                        </fieldset>    
                            
                        <footer class="review-submit">
                            <label class="label-v2">Review</label>
                            <div class="stars-ratings">
                                <input type="radio" name="stars-rating" id="stars-rating-5">
                                <label for="stars-rating-5"><i class="fa fa-star"></i></label>
                                <input type="radio" name="stars-rating" id="stars-rating-4">
                                <label for="stars-rating-4"><i class="fa fa-star"></i></label>
                                <input type="radio" name="stars-rating" id="stars-rating-3">
                                <label for="stars-rating-3"><i class="fa fa-star"></i></label>
                                <input type="radio" name="stars-rating" id="stars-rating-2">
                                <label for="stars-rating-2"><i class="fa fa-star"></i></label>
                                <input type="radio" name="stars-rating" id="stars-rating-1">
                                <label for="stars-rating-1"><i class="fa fa-star"></i></label>
                            </div>
                            <button type="button" class="btn-u btn-u-sea-shop btn-u-sm pull-right">Submit</button>
                        </footer>
                    </form>
                </div>
                <!-- End Reviews -->                
            </div>
        </div>
    </div><!--/end container-->    
    <!--=== End Content Medium ===-->

     <!--=== Illustration v2 ===-->
    <div class="container">
        <div class="heading heading-v1 margin-bottom-20">
            <h2>精品推薦</h2>
            <p>商城採用精準推薦算法，能夠為您挑選最適合您的搭配套裝</p>
        </div>

        <div class="illustration-v2 margin-bottom-60">
            <div class="customNavigation margin-bottom-25">
                <a class="owl-btn prev rounded-x"><i class="fa fa-angle-left"></i></a>
                <a class="owl-btn next rounded-x"><i class="fa fa-angle-right"></i></a>
            </div>

            <ul class="list-inline owl-slider-v4">
              {% for hotGoods in shopRecommendGoods %}
                <li class="item">
                    <a href="/shop/goods/{{hotGoods.goodsID}}"><img class="img-responsive" src="{{hotGoods.imgurl}}" alt="{{hotGoods.title}}"></a>
                    <div class="product-description-v2">
                        <div class="margin-bottom-5">
                            <h4 class="title-price"><a href="/shop/goods/{{hotGoods.goodsID}}">{{hotGoods.title}}</a></h4>
                            <span class="title-price">NTD${{hotGoods.price}}</span>
                        </div>    
                        <!-- <ul class="list-inline product-ratings">
                            <li><i class="rating-selected fa fa-star"></i></li>
                            <li><i class="rating-selected fa fa-star"></i></li>
                            <li><i class="rating-selected fa fa-star"></i></li>
                            <li><i class="rating fa fa-star"></i></li>
                            <li><i class="rating fa fa-star"></i></li>
                        </ul>     -->
                    </div>
                </li>
                 {% endfor %}
            </ul>
        </div> 
    </div>    
    <!--=== End Illustration v2 ===-->



    <script src="/public/assets/new/plugins/master-slider/quick-start/masterslider/masterslider.min.js"></script>
    <script src="/public/assets/new/plugins/master-slider/quick-start/masterslider/jquery.easing.min.js"></script>
    <script src="/public/assets/new/js/plugins/master-slider.js"></script>
    <script src="/public/assets/new/js/forms/product-quantity.js"></script>

    <script>
        jQuery(document).ready(function() {
            // App.init();
            OwlCarousel.initOwlCarousel();
            MasterSliderShowcase2.initMasterSliderShowcase2();
            StyleSwitcher.initStyleSwitcher();      
        });

        function addNumCart(id, price) {
            var num = document.getElementById('qty').value;
            // console.log(num, arguments)
            
          addCart(id, num, price, true)
        }

        function minusQty() {
            var num = document.getElementById('qty').value;
            if (num <= 1) return
            document.getElementById('qty').value = parseInt(num) - 1
        }

        function checkQty() {
            var num = parseInt(document.getElementById('qty').value) || 0;
            // if (num <= 0) {
            document.getElementById('qty').value = Math.max(num, 1)
            // }
        }
    </script>

{% endblock %}
